<template>
  <div class="tags-container">
    <HomeHeader />
    
    <!-- 标签标题 -->
    <div class="tags-header">
      <h1>Post Tags</h1>
    </div>

    <!-- 第一个大盒子：所有标签 -->
    <div class="tags-section">
      <div class="tags-wrapper">
        <router-link 
          v-for="tag in tags" 
          :key="tag.name"
          :to="tag.path"
          class="tag-item"
          :style="{ backgroundColor: tag.bgColor }"
        >
          {{ tag.name }}
          <span class="tag-count">{{ tag.count }}</span>
        </router-link>
      </div>
    </div>

    <!-- 第二个大盒子：技术标签云 -->
    <div class="tag-cloud-section">
      <div class="tag-cloud">
        <div 
          v-for="tag in techTags" 
          :key="tag.name"
          class="tech-tag"
          :style="{
            fontSize: `${tag.size}px`,
            color: tag.color
          }"
        >
          {{ tag.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import HomeHeader from '@/components/home-header.vue';

// 模拟标签数据
const tags = ref([
  { name: '第一次搭建博客', count: 1, path: '/tags/first-blog', bgColor: '#ffb7c5' },
  { name: '测试', count: 1, path: '/tags/test', bgColor: '#b8c5e6' },
  { name: '操作技巧', count: 1, path: '/tags/tips', bgColor: '#a8e6cf' },
  { name: '乱码', count: 1, path: '/tags/encoding', bgColor: '#ffd3b6' },
  { name: '最好吃的面条', count: 1, path: '/tags/food', bgColor: '#ffe7ac' },
  { name: '技术', count: 2, path: '/tags/tech', bgColor: '#bde0fe' },
  { name: '兄弟日记', count: 1, path: '/tags/diary', bgColor: '#a8e6cf' },
  { name: '初见', count: 1, path: '/tags/first-meet', bgColor: '#ddb7e6' },
  { name: '博客加密', count: 1, path: '/tags/encryption', bgColor: '#b7e6d8' },
  { name: '博客插图', count: 1, path: '/tags/images', bgColor: '#b7e6e6' },
  { name: '博客推荐', count: 1, path: '/tags/recommendation', bgColor: '#ffe4b5' },
  { name: '博文自选照片', count: 1, path: '/tags/photos', bgColor: '#b7e6d8' }
])

// 技术标签云数据
const techTags = ref([
  { name: '技术', size: 48, color: '#4a90e2' },
  { name: 'Blog', size: 32, color: '#50c878' },
  { name: '博客插图', size: 24, color: '#c678dd' },
  { name: '乱码', size: 20, color: '#e06c75' },
  { name: '测试', size: 28, color: '#61afef' },
  { name: '博客加密', size: 22, color: '#98c379' }
])
</script>

<style scoped lang="scss">
.tags-container {
  min-height: 100vh;
  padding: 20px;
  background: linear-gradient(to bottom, #fff5f5, #fff);
}

.tags-header {
  text-align: center;
  margin: 40px 0;
  
  h1 {
    font-size: 36px;
    color: #333;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }
}

.tags-section {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.tag-item {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 20px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    transition: all 0.3s ease;
  }
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #333;
    
    &::before {
      background: rgba(255, 255, 255, 0.9);
    }
    
    .tag-count {
      background: rgba(0, 0, 0, 0.1);
      color: #333;
    }
  }
  
  .tag-count {
    margin-left: 6px;
    background: rgba(255, 255, 255, 0.3);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 12px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
  }
  
  > span:not(.tag-count) {
    position: relative;
    z-index: 1;
  }
}

.tag-cloud-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  
  .tech-tag {
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      transform: scale(1.1);
    }
  }
}
</style>
